<template>
	<div>
		<div style="width:100%;" class="" v-loading="loading">
			<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex mb14">
				<div class="displayFlex">
					<div v-for="(item,index) in productionList" :key="index" class="font18 mr20 point" @click="getData(item)"
						style="padding: 0 20px;" :class="[item.id == params.equipmentId?'selectedClass':'']"
						:style="{'color':item.id == params.equipmentId?'#fff':'#679EFF'}">{{item.equipmentName}}</div>
				</div>
			</div>

			<div style="display: flex;justify-content: space-between;">
				<div style="height: 940px;overflow-y: auto;flex: 3;">
					<div v-for="(item,index) in dataList5" :key="'0'+index" style="background: #041C62;width: 100%;"
						class="mb12 displayFlex ">
						<!-- <div style="width: 402px;height: 237px;background-size: 100%;background-repeat: no-repeat;padding: 10px;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon14.png')+')'}">
							<el-image v-if="item.imgId" :src="fileViewUrl+item.imgId" style="width: 100%;height: 100%;"
								fit="contain" :preview-src-list="[fileViewUrl+item.imgId] " />
						</div> -->

						<div style="height: 237px;padding:13px 0 13px 0px;width: 100%;"
							@click="gotoUrl(item,'PRODUCTION_SUBSET')">
							<div class="font18 colorfff point"
								style="width: 416px;line-height: 36px;background: linear-gradient(-90deg, rgba(22,73,164,0), #1649A4);padding-left: 20px;">
								{{item.installationName}}
							</div>
							<div v-if="item.paramList && item.paramList.length"
								@click.stop="chooseThis(item,'PRODUCTION_SUBSET')"
								style="background: #041C62;flex-wrap: nowrap;width: 100%;overflow-x: auto;"
								class="mt13 displayFlex point">
								<div v-for="(item2,index2) in item.paramList" :key="index2" class="mr12"
									style="width: 270px;height: 152px;background: linear-gradient(0deg, #052275, #2067E5);box-shadow: 0px 1px 4px 0px rgba(0,15,34,0.4);padding: 32px;">
									<div class="font18" style="color:#fff">{{item2.parameterName}}</div>
									<div class="font28 mt10" :style="{'color':item2.status  == 'NORMAL'?'#75E7FF':'#FF537B'}">
										{{ (item2.latestAmount!=null) ?Number(item2.latestAmount.toFixed(2)):'--'}}{{item2.unitCode}}
									</div>
									<div :style="{'color':item2.status  == 'ABNORMAL'?'#FF537B':'#fff'}" class="font14 mt5">
										{{item2.statusStr == '历史异常' ?'正常':item2.statusStr}}
									</div>
								</div>
							</div>
						</div>
					</div>

					<div v-for="(item,index) in dataList6" :key="'1'+index" style="background: #041C62;width: 100%;"
						class="mb12 displayFlex">
						<!-- <div style="width: 402px;height: 237px;background-size: 100%;background-repeat: no-repeat;padding: 10px;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon14.png')+')'}">
							<el-image v-if="item.imgId" :src="fileViewUrl+item.imgId" style="width: 100%;height: 100%;"
								fit="contain" :preview-src-list="[fileViewUrl+item.imgId] " />
						</div> -->

						<div style="height: 237px;padding:13px 0 13px 0px;width: 100%;" @click="gotoUrl(item,'GAS_DEFENCE')">
							<div class="font18 colorfff point"
								style="width: 416px;line-height: 36px;background: linear-gradient(-90deg, rgba(22,73,164,0), #1649A4);padding-left: 20px;">
								{{item.installationName}}
							</div>
							<div v-if="item.paramList && item.paramList.length" @click.stop="chooseThis(item,'GAS_DEFENCE')"
								style="background: #041C62;flex-wrap: nowrap;width: 100%;overflow-x: auto;"
								class="mt13 displayFlex point">
								<div v-for="(item2,index2) in item.paramList" :key="index2" class="mr12"
									style="width: 270px;height: 152px;background: linear-gradient(0deg, #052275, #2067E5);box-shadow: 0px 1px 4px 0px rgba(0,15,34,0.4);padding: 32px;">
									<div class="font18" style="color:#fff">{{item2.parameterName}}</div>
									<div class="font28 mt10" :style="{'color':item2.status  == 'NORMAL'?'#75E7FF':'#FF537B'}">
										{{ (item2.latestAmount!=null)?Number(item2.latestAmount.toFixed(2)):'--'}}{{item2.unitCode}}
									</div>
									<div :style="{'color':item2.status  == 'ABNORMAL'?'#FF537B':'#fff'}" class="font14 mt5">
										{{item2.statusStr == '历史异常' ?'正常':item2.statusStr}}
									</div>
								</div>
							</div>
						</div>
					</div>

					<div v-for="(item,index) in dataList7" :key="'2'+index" style="background: #041C62;width: 100%;"
						class="mb12 displayFlex">
						<!-- <div style="width: 402px;height: 237px;background-size: 100%;background-repeat: no-repeat;padding: 10px;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon14.png')+')'}">
							<el-image v-if="item.imgId" :src="fileViewUrl+item.imgId" style="width: 100%;height: 100%;"
								fit="contain" :preview-src-list="[fileViewUrl+item.imgId] " />
						</div> -->

						<div style="height: 237px;padding:13px 0 13px 0px;width: 100%;"
							@click="gotoUrl(item,'WATER_DEFENCE')">
							<div class="font18 colorfff point"
								style="width: 416px;line-height: 36px;background: linear-gradient(-90deg, rgba(22,73,164,0), #1649A4);padding-left: 20px;">
								{{item.installationName}}
							</div>
							<div v-if="item.paramList && item.paramList.length" @click.stop="chooseThis(item,'WATER_DEFENCE')"
								style="background: #041C62;flex-wrap: nowrap;width: 100%;overflow-x: auto;"
								class="mt13 displayFlex point">
								<div v-for="(item2,index2) in item.paramList" :key="index2" class="mr12"
									style="width: 270px;height: 152px;background: linear-gradient(0deg, #052275, #2067E5);box-shadow: 0px 1px 4px 0px rgba(0,15,34,0.4);padding: 32px;">
									<div class="font18" style="color:#fff">{{item2.parameterName}}</div>
									<div class="font28 mt10" :style="{'color':item2.status  == 'NORMAL'?'#75E7FF':'#FF537B'}">
										{{ (item2.latestAmount!=null)?Number(item2.latestAmount.toFixed(2)):'--'}}{{item2.unitCode}}
									</div>
									<div :style="{'color':item2.status  == 'ABNORMAL'?'#FF537B':'#fff'}" class="font14 mt5">
										{{item2.statusStr == '历史异常' ?'正常':item2.statusStr}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style="height: 940px;overflow-y: auto;flex: 1;" class="ml10">
					<div>
						<div style="background: #041C62;" v-for="(item,index) in dataList1" :key="index">
							<div class="textCenter"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon29.png')+')'}"
								style="background-size: 100% 42px;background-repeat: no-repeat;">
								<div class="colorfff font18">{{item.equipmentName}}</div>
							</div>

							<div class="">
								<div class="displayFlexBet" style="padding: 40px 30px 60px;">
									<div style="flex: 1;" class="textCenter">
										<div class="colorfff font16 mb5">内控稳定率(时段)</div>
										<div class="font24" style="color: #75E7FF;">
											<span>{{item.stablePercent}}</span>
											<span class="font16">%</span>
										</div>
									</div>
									<div style="flex: 1;" class="textCenter">
										<div class="colorfff font16 mb5">设备在线率(时段)</div>
										<div class="font24" style="color: #75E7FF;">
											<span>{{item.onlinePercent}}</span>
											<span class="font16">%</span>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>

					<div style="background: #041C62;" class="mt15">
						<div style="padding: 32px 15px;">
							<div class="colorfff font20">高频问题定位</div>
							<div>
								<img src="../../assets/bigScreen/icon30.png" style="width: 71px;height: 6px" />
							</div>
						</div>

						<div v-for="(item,index) in dataList2" :key="index" style="padding: 20px 30px;" class="font16 point"
							@click="gotoDet(item)">
							<div class="displayFlexBet">
								<div class="colorfff">{{item.equipmentName}}</div>
								<div style="color: #75E7FF;" class="font14">{{item.num}}</div>
							</div>
							<div class="colorfff mt5">{{item.installationName}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog :visible.sync="dialogVisible" append-to-body :title="recordDate">
			<div class="font18 colorfff mb10"
				style="width: 416px;line-height: 36px;background: linear-gradient(-90deg, rgba(22,73,164,0), #1649A4);padding-left: 20px;">
				{{selectItem.installationName}}
			</div>

			<div v-for="(item,index) in parameterAmountList" :key="index" style="background: #041C62;">
				<div class="colorfff font16" style="padding: 10px 30px;">{{item.parameterName || '--'}}</div>
				<div :id="'lineChart'+index"
					style="width: calc(100% - 10px);height: 300px;margin-bottom: 20px;background: #040F48;margin: 0 5px 5px;" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that

	export default {
		name: "lineCom",
		data() {
			return {
				dialogVisible: false,
				loading:true,
				dataList1: [],
				dataList2: [],
				dataList5: {},
				dataList6: {},
				dataList7: {},
				selectItem: {},
				productionList: [],
				parameterAmountList: [],
				params: {
					equipmentId: '',
				},
				recordDate: moment().format('YYYY-MM'),
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID='
			}
		},

		mounted() {
			that = this
			that.ajax({
				url: '/productionEquipment/pageProductionEquipmentBase?pageIndex=1&pageSize=50&ticketId=' + that.$store
					.state.token,
				data: JSON.stringify({
					ticketId: that.$store.state.token
				}),
				contentType: 'application/json',
				success: function(result) {
					if (result.data) {
						that.productionList = result.data.records
						if (that.productionList.length > 0 && !that.params.equipmentId) that.params
							.equipmentId = that
							.productionList[0].id
						that.getData()
					}
				},
			})
			that.getHourStatisticsList()
			that.getHighWarningInstallationList()
		},
		methods: {

			gotoDet(item) {
				if (item.installationType == 'GAS_DEFENCE') that.openUrl('wasteGas/outletInspectDefDet?defenceId=' + item
					.installationId)
				if (item.installationType == 'WATER_DEFENCE') that.openUrl('wasteWater/outletInspectDefDet?defenceId=' + item
					.installationId)
				if (item.installationType == 'PRODUCTION_SUBSET') that.openUrl('produceManage/equipmentDet?installationId=' +
					item
					.installationId)
			},

			openUrl(url) {
				if (process.env.NODE_ENV === 'production') {
					window.open('http://bbep.cc/#' + url);
				} else {
					window.open('http://localhost:9999/#' + url);
				}
			},

			gotoUrl(item, type) {
				if (type == 'PRODUCTION_SUBSET') {
					that.openUrl('produceManage/equipmentDet?installationId=' + item.installationId)
				}
				if (type == 'GAS_DEFENCE') {
					that.openUrl('wasteGas/outletInspectDefDet?defenceId=' + item.installationId)
				}
				if (type == 'WATER_DEFENCE') {
					that.openUrl('wasteWater/outletInspectDefDet?defenceId=' + item.installationId)
				}
			},

			getHighWarningInstallationList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getHighWarningInstallationList?ticketId=' + that.$store.state
						.token,
					data: JSON.stringify({
						ticketId: that.$store.state.token
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList2 = result.data
					},
				})
			},

			getHourStatisticsList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getHourStatisticsList?ticketId=' + that.$store.state.token,
					data: JSON.stringify({
						ticketId: that.$store.state.token
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
					},
				})
			},

			chooseThis(item, installationType) {
				that.selectItem = item
				that.formLineData(item, installationType)
			},

			async formLineData(item, installationType) {
				let loading

				function getMonthInstallationParameterList() {
					return new Promise((resolve, reject) => {
						loading = that.$loading({
							lock: true,
							text: 'Loading',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});

						that.ajax({
							url: '/productionEquipment/stdBook/getMonthInstallationParameterList',
							data: JSON.stringify({
								installationType: installationType,
								installationId: item.installationId,
								recordDate: moment().format('YYYY-MM-DD')
							}),
							contentType: 'application/json',
							success: function(result) {

								resolve(result.data)
							}
						})
					})
				}

				let dataList = await getMonthInstallationParameterList()
				//console.log(dataList)
				that.parameterAmountList = dataList
				that.dialogVisible = true
				setTimeout(function() {
					loading.close();
					for (let key in dataList) {
						let chartDom = document.getElementById('lineChart' + key);
						let myChart = echarts.init(chartDom);
						let option;
						let thisData = dataList[key]

						let series = [{
							name: thisData.parameterName,
							type: 'line',
							smooth: false,
							//symbol: "none",
							// areaStyle: {
							// 	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							// 		offset: 0,
							// 		color: '#FF355A' // 渐变起始颜色
							// 	}, {
							// 		offset: 1,
							// 		color: '#041452' // 渐变结束颜色
							// 	}])
							// },
							lineStyle: {
								color: '#75E7FF', // 折线颜色
								width: 1, // 折线宽度
							},
							data: [],
						}]

						let xSeries = []
						for (let item of thisData.list) {
							xSeries.push(item.dateStr)
							series[0].data.push(item.amount || 0)
						}


						option = {
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross'
								},
								backgroundColor: 'rgba(255, 255, 255, 0.8)',
								position: function(pos, params, el, elRect, size) {
									var obj = {
										top: 10
									};
									obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
									return obj;
								},
								extraCssText: 'width: 170px'
							},
							grid: {
								top: "12%",
								bottom: "10%",
								left: "5%",
								right: '5%'
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: xSeries,
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							yAxis: {
								name: thisData.parameterName,
								type: 'value',
								splitLine: {
									show: false,
									lineStyle: {
										color: ["#FAFBFC"],
									},
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false,
									//y轴文字的配置
									textStyle: {
										color: "rgba(215, 215, 215, 1)",
									},
									// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
								},
								axisLine: {
									show: false,
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							dataZoom: [{
									type: 'inside',
									start: 0,
									end: 2000
								},
								{
									start: 0,
									end: 2000
								}
							],
							series: series
						};

						option && myChart.setOption(option);
					}
				}, 1000)

			},

			getData(item) {
				if (item) that.params.equipmentId = item.id
				that.countEquipRunTime()
				that.getWaterEquipRunList()
				that.getGasEquipRunList()
			},

			getWaterEquipRunList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getWaterEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: moment().format('YYYY-MM-DD')
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.paramList && item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'HISTORY_ABNORMAL') item2.status = 'NORMAL'
									if (item2.status == 'NORMAL') item2.bg = "#F6F7FB"
									if (item2.status == 'HISTORY_ABNORMAL') item2.bg = "##FFF8C4"
									if (item2.status == 'ABNORMAL') item2.bg = "##D10633"
								}
							}
						}
						that.dataList7 = result.data
					},
				})
			},

			getGasEquipRunList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getGasEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: moment().format('YYYY-MM-DD')
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.paramList && item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'HISTORY_ABNORMAL') item2.status = 'NORMAL'
									if (item2.status == 'NORMAL') item2.bg = "#F6F7FB"
									if (item2.status == 'HISTORY_ABNORMAL') item2.bg = "##FFF8C4"
									if (item2.status == 'ABNORMAL') item2.bg = "##D10633"
								}
							}
						}
						that.dataList6 = result.data
					},
				})
			},

			countEquipRunTime() {
				that.ajax({
					url: '/productionEquipment/stdBook/getProdEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: moment().format('YYYY-MM-DD')
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList5 = result.data
						that.loading = false
						// for (let item of that.dataList5) {
						// 	if (item.installationName == '汽化炉') {
						// 		that.selectItem = item
						// 		that.formLineData(item, 'PRODUCTION_SUBSET')
						// 	}
						// }
					},
				})
			},
		}
	}
</script>

<style scoped>
	.selectedClass {
		height: 31px;
		line-height: 31px;
		background: linear-gradient(0deg, rgba(129, 211, 245, 0.75), rgba(129, 211, 245, 0));
	}

	>>>.el-dialog {
		background: #000;
	}
</style>